<template>
	
	<view>
		<image src="/static/homgbg.png" mode="widthFix" class="image posiab"></image>
		<view class="con posire" :style="{paddingTop:shh+30+'px'}">
			<view class="flex pt40" style="justify-content: space-between;">
				<view class="flex-a-i">
					<view class="flex-ju-c wh140-140 ra140 bgfff">
						<image :src="userInfo.headimg" class="image wh140-140 ra140"></image>
					</view>
					<image @click="navto('setting')" src="/static/edithome.png" mode="widthFix" class="image width32 ml30"></image>
				</view>
				<view @click="navto('setting')" class="flex-ju-c wh70-70 ra70 bgfff">
					<image src="/static/shezhi.png" mode="widthFix" class="image width40"></image>
				</view>
			</view>
			<view class="size31 bold mt20">{{userInfo.name}}</view>
			<view class="size25 mt5 mb5">UID：{{userInfo.uuid}}</view>
			<view @click="copy(userInfo.metaAddress)" class="flex-a-i size25">区块链地址：
			   {{userInfo.metaAddress?userInfo.metaAddress.substring(0,10)+'...':'未实名'}}
			<image @click="copy(userInfo.metaAddress)" src="/static/copy.png" mode="widthFix" class="image width20 ml10"></image>
			</view>
			<view class="flex-ju-b mt50">
				<image @click="navto('order/index?index=0')" class="image  mr10" mode="widthFix" src="/static/yaoqinghaoyou.png"></image>
				<image @click="navto('money')" class="image  ml10" mode="widthFix" src="/static/wodecangping.png"></image>
			
			</view>
			<view class="flex-ju-b mt20">
				<image @click="navto('yaoqingpai')"  class="image  mr10" mode="widthFix" src="/static/yaoqingpangding.png"></image>
				<image @click="tapshiming" class="image  ml10" mode="widthFix" src="/static/wodeqianbao.png"></image>
			</view>
			<view @click="navto('yaoqing/index')" class="bgfff pg30 flex-ju-b ra20 mt30">
				<view class="flex-a-i size26">
					<image mode="widthFix" src="/static/mama.png" class="width43 flex image"></image>
					<view class="ml20 mr20">
						我的邀请码：{{inviteinfo.my_invite}}
					</view>
					<image @click.stop="copy(inviteinfo.my_invite)" mode="widthFix" src="/static/copy.png" class="width21 flex image"></image>
				</view>
				<uni-icons type="right" color="#999" size="13"></uni-icons>
			</view>
			
			<view class="mt50 flex-ju-c">
				<view class="flex-a-i  color999 size31"> 
					<view @click="tabcanp(0)"
						class="flex-ju-c  flex-col  mr30">
						<view>
							我的藏品
						</view>
						<view class="flex flex-row height7">
							<image v-show="tindex==0" mode="heightFix" class="height7" src="/static/heng.png"></image>
						</view>
					</view>
					<view @click="tabcanp(1)"
						class="flex-ju-c flex-col ml30 mr30">
						我的盲盒
						<view class="flex flex-row height7">
							<image v-show="tindex==1" mode="widthFix" class="width106" src="/static/heng.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-if="isdata" class="flex-ju-c pt100 ">
				<view class="flex-ju-c flex-col">
					<image mode="widthFix" class="width210 ra20" src="/static/nodata.png"></image>
					<view class=" size24">这里什么也没有~</view>
				</view>
			</view>
			
			<view class="flex-ju-b pt30 flex-wrap pb30 ">
				<template v-for="(item,p) in list" :key="p">
						<view  @click="tapitem(item)"  class="borderE1E1E1 mb30 ra20">
							<view class="posire">
								<image class="image wh333-333 ra20" :src="item.thumb"></image>
							</view>
							<view class="width300" style="margin: auto;">
								<view class=" one bold size29  mt20">{{item.title}}</view>
								<view class=" color999 size22 mt10 mb30 flex-ju-b">
									<view>
										目前拥有{{item.count}}个
									</view>
									<view class="flex-ju-c  ">
										<!-- <view class="flex-ju-c size22 colorFF6E44 ra10 wh97-34 borderFF6E44">
											寄售中
										</view> -->
										<!-- <view class="flex-ju-c size22 color000 ra10 wh97-34 border000">
											锁单中
										</view> -->
									</view>
								</view>
								
							</view>
						</view>
				</template>
			</view>
		</view>
		<uni-popup @change="popups" type="bottom" :background-color="theme?'#141414':'#fff'" border-radius="10px 10px 0 0" ref="getcollection">
			<view class="pt40 pb140" :class="theme?'colorfff':''">
				<view class="flex-ju-b posire size29 bold mb50 con">
					<view>{{boxItem.title}}<text class="color999">（{{boxItem.count}}份）</text></view>
					<uni-icons type="closeempty" @click="$refs.getcollection.close()" class="ml30" size="20" :color="theme?'#fff':'#000'"></uni-icons>
					<!-- <view @click="isliang = true" v-if="userInfo.multiMany==1&&!isliang"
						class="posiab srgb right30 flex-ju-c size24 wh145-48 ra48" :class="theme?'color000':''">
						批量操作
					</view>
					<view @click="quxiaojishou" v-if="userInfo.multiMany==1&&isliang"
						class="posiab border000 right30 flex-ju-c size24 wh145-48 ra48" :class="theme?'color000':''">
						取消批量
					</view> -->
						<!-- <view class="width26"></view> -->
						<view @click="aloseaall" 
							class="posiab border000 right30 flex-ju-c size24 wh145-48 ra48 mr30" :class="theme?'color000':''">
							批量下架
						</view>
				</view>
				<view class="con">
					<scroll-view scroll-y style="height: 700rpx;">
						<view class="flex-ju-b flex-wrap">
							<view @click="tapdeta(item)" v-for="(item,index) in boxList " :key='index' style="flex:0 0 48%;" class="posire mb25">
								<view class="  ra20 bgF6F6F6 pg20 flex-col" >
									<view class="size29 bold">#{{ item.meta_chain != 1 ? '上链中' : hao(item.nftId) }}</view>
									<view class="wh97-10"></view>
									<view v-if="item.status == 5"
										class="flex-ju-c size22 bg000 ra50 posiab wh50-50 top0 right0 colorfff" >
										售
									</view>
									<view v-if="item.status == 5" class="color999  size22">寄售价：¥{{item.sell_price}}</view>
									<view v-else class="color999  size22">寄售价：未寄售</view>
									<view class="color999 size22">买入价：¥{{item.money_price}}</view>
									
									<view v-if="isliang" class="posiab bottom20 right20">
										<view v-if="!item.falg&&item.status!=5&&item.meta_chain==1" class="dayuan mt10 flex-ju-c"></view>
										<image v-if="item.falg" mode="widthFix" src="/static/gougou.png" class="image width30"></image>
									</view>
									
									<!-- <view v-if="isliang&&item.status!=5&&item.meta_chain==1" class="dayuan mt10 flex-ju-c">
										<view v-if="item.falg" class="xiaoyuan"></view>
									</view> -->
									
								</view>
							</view>
						</view>
					</scroll-view>
					
					<view v-if="userInfo.multiMany==1&&isliang" class="ra20 flex-ju-a pt20 pb20 bgfff height80 bold"  style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
						<view  @click="quxiaojishou"  class="srgb flex-ju-c borderE1E1E1 wh314-100 ra30 mt30">取消批量</view>
						<view  @click="tapjichu" class="srgb flex-ju-c bg000 colorfff wh314-100 ra30 mt30">下一步</view>
					</view>
					<view @click="isliang = true" v-if="userInfo.multiMany==1&&!isliang" class="ra20 flex-ju-a pt20 pb20 bgfff height80 bold"  style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
						<view  class="srgb flex-ju-c bg000 colorfff flex1 height100 ra30 mt30 mr20 ml20">批量操作</view>
					</view>
					
					<!-- <view v-if="isliang" @click="tapjichu" class="srgb flex-ju-c wh694-100 ra100 mt30">一键寄售</view> -->
					
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="pilangjishou" border-radius="20px 20px" type="bottom">
			<view class="pilaing bgfff" style="height: auto;">
				<view class="flex-ju-b pt40">
					<view class="width28 ml30"></view>
					<view class="size29 bold  flex-ju-c">批量寄售</view>
					<image mode="widthFix" @click="$refs.pilangjishou.close()" class="width28 mr30" src="/static/close.png"></image>
				</view>
				<view class="con mt40 pb140">
					<view class="bgF6F7F8 pt40 pb40 ra20 mb30">
						<view class="con">
							<view class="flex-a-i">
								<image :src="info.thumb" class="wh152-152 ra15"></image>
								<view class="ml20">
									<view style="max-width: 250rpx;" class="one size29 bold ">{{info.title}}</view>
									<view class="flex-a-i size25 mt30 ">
										<view>
											<view class="color999">藏品编号</view>
											<view>#{{hao(info.nftId)}}<template v-if="piliang">...</template>
											</view>
										</view>
										<view class="ml50">
											<view class="color999">藏品类型</view>
											<view>藏品</view>
										</view>
										<view class="ml50">
											<view class="color999">获得方式</view>
											<view>{{info.source_value}}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<view class="flex-ju-b con size26 mt30">
							<view>寄售金额</view>
							<view class="flex-a-i width380  ra30 " style="text-align: right;">
								<input :placeholder="`寄售价不能大于${info.examine_max_ratio}元或小于${info.examine_min_ratio}元`" v-model="money_price"
									class="width180 ml10 mr10 flex1 size22 color000" :class="theme?' colorfff':'border-rfff'" />
								元
							</view>
						</view>
					</view>
					
					<view class="color999 size24  center" style="margin: auto;">
						<view>交易成功后，将扣除{{info.edition_tax_ratio}}%的版权费以及{{info.brokerage_ratio}}%的平台服务费</view>
					</view>
					
					<view class="ra20 flex-ju-b pg30 bgfff  mt80"  style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
						<view @click="tapmima"  class="bold  bg000 colorfff ra20 flex-ju-c height100 width1000  size29  ">
							一键寄售
						</view>
					</view>
					
				</view>
			</view>
		</uni-popup>
		
		<uni-popup type="center" background-color="#fff" border-radius="20px 20px" ref="mima">
			<view class="pt40 pb40 posire">
				<view class="flex-ju-c">
					<image mode="widthFix" src="/static/tancc.png" class="width127 posiab top-60"></image>
				</view>
				<view class="flex-ju-c size29  mb50 mt80">
					<view>请输入交易密码</view>
				</view>
				<xsk-code-input width="84" height="84" @confirm="inputConfirm"></xsk-code-input>
				
				<!-- <view class="flex-ju-b">
					<view class="flex-ju-b size24 ml80 mt30">
						<view>出售数量</view>
						<view :class="theme?'bg141414 colorfff':'bgfff'" class="flex-a-i borderededed center ml30 ra30">
							<view @click="tapnumebrs(1)" :style="{borderRight:theme?'1px solid #292929':'1px solid #F5F6F7'}" class="wh48-48 flex-ju-c">-</view>
							<view>
								<input class="width95 " :class="theme?' colorfff':'color000'" v-model="number" />
							</view>
							<view @click="tapnumebrs(2)" :style="{borderLeft:theme?'1px solid #292929':'1px solid #F5F6F7'}" class="wh48-48 flex-ju-c ">+</view>
						</view>
					</view>
					<view></view>
				</view> -->
				<view @click="navto('/pages/user/password?type=level2password')" class="flex-ju-c color999 size24 mt40" style="text-decoration: underline">
					未设置交易密码或忘记密码？
				</view>
				<view class="flex-ju-c flex-col mt50 ">
					<view @click="tapding" class="bold srgb bg000 colorfff wh530-100 ra20 flex-ju-c">确认</view>
					<view @click="$refs.mima.close()" class="bold srgb wh694-100 ra100 flex-ju-c">取消</view>
				</view>
				
			</view>
		</uni-popup>
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				metaAddress:"",
				checked: false,
				info: {},
				money_price: "",
				level2password: "",
				piliang: false,
				arr:[],
				
				
				inviteinfo:{},
				tindex:0,
				theme: uni.getStorageSync('theme'),
				tindex: 0,
				list: [],
				isdata: false,
				boxItem: "",
				isliang: false,
				boxList: [],
				box: [],
				userInfo:{},
				idcardFlag:"",
			}
		},
		onPullDownRefresh(){
			this.typelist()
		},
		onLoad(option) {
			console.log(1111)
			this.http('userInfo').then((res) => {
				uni.setStorageSync('user', res.data)
				this.userInfo = res.data
			})
			
			this.http('user/invite').then(res => {
				this.inviteinfo = res.data
				// this.$refs.haibao.open()
			})
			
			this.getlist('product')
			if (uni.getStorageSync('isOkData')) {
				this.idcardFlag = uni.getStorageSync('isOkData').is_ok
			}
		},
		onShow() {
			if(uni.getStorageSync('user')){
				this.userInfo = uni.getStorageSync('user')
			}
		},
		methods: {
			aloseaall(){
				uni.showModal({
					title: '提示',
					content: '确定批量下架吗',
					success: (res)=> {
						if (res.confirm) {
							this.http('resale/closeAll',{
								product_id:this.boxItem.product_id
							},'post').then(res=>{
								this.$refs.getcollection.close()
								uni.showToast({
									title: '取消成功！',
									icon: 'none'
								})
							})
				
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			tapshiming(){
				if(this.idcardFlag){
					this.navto('shiming/detail')
				}else{
					this.navto('shiming/index')
				}
			},
			inputConfirm(e){
				this.level2password = e
			},
			tapmima(){
				if (!this.money_price) {
					uni.showToast({
						title: "请输入价格",
						icon: "none"
					})
					return
				}
				this.$refs.mima.open()
			},
			tapding() {
				if (this.level2password.length != 6) {
					uni.showToast({
						title:"二级密码格式不正确",
						icon:"none"
					})
					return
				}
				
				if(this.checked){
					if(!this.metaAddress){
						uni.showToast({
							title: "请输入钱包地址",
							icon: "none"
						})
						return
					}
				}
			
				let package_sku_id = ''
				var arr = []
				if (this.piliang) {
					this.arr.forEach(item => {
						arr.push(item.id)
					})
					package_sku_id = arr.join(',')
				} else {
					package_sku_id = this.info.id
				}
				
			
				uni.showModal({
					content: "确定要" + this.money_price +'元寄售吗',
					success: (res) => {
						if (res.confirm) {
							this.http('packages/resales', {
								package_sku_id,
								money_price: this.money_price,
								level2password: this.level2password,
								metaAddress:this.metaAddress
							}, 'post').then(res => {
								uni.reLaunch({
									url: './collection/suu?info=' + JSON.stringify(this.info) + '&price=' +
										this.money_price + '&type=' + arr.length
								})
							})
						}
					}
				})
			
			},
			
			tappilangjishou(){
				this.piliang = true
				 
				this.http('packages/info/' + this.arr[0].uuid).then(res => {
					this.info = res.data.info
					this.$refs.pilangjishou.open()
				})
				
			},
			tabcanp(index) {
				this.tindex = index
				this.typelist()
			},
			typelist(){
				if(this.tindex){
					this.getlist('box')
				}else{
					this.getlist('product')	
				}
			},
			getlist(type){
				this.http('packages/list', {
					type,
					search: '',
					is_spe: 0
				}).then(res => {
					this.list = res.data.list
				
					if (this.list.length) {
						this.isdata = false
					} else {
						this.isdata = true
					}
					uni.stopPullDownRefresh()
				})
			},
			
			popups(e) {
				if (e.show) {
					this.isliang = false
				}
			},
			quxiaojishou() {
				this.isliang = false
				this.boxList.forEach(item => {
					item.falg = false
				})
			},
			tapjichu() {
				let arr = []
				this.boxList.forEach(item => {
					if (item.falg) {
						arr.push(item)
					}
				})
				if (arr.length <= 1) {
					uni.showToast({
						title: "最少选择2个",
						icon: "none"
					})
					return
				}
				this.arr =arr
				this.tappilangjishou()
			
				// if (arr.length) {
					
				// 	this.$refs.getcollection.open()
				// 	uni.navigateTo({
				// 		url: 'jishou?piliang=true&arr=' + JSON.stringify(arr)
				// 	})
				// } else {
				// 	uni.showToast({
				// 		title: "请选择需要寄售的物品",
				// 		icon: "none"
				// 	})
				// }
			},
			tapdeta(item) {
				if (!this.isliang) {
					this.navto('./collection/detail?uuid=' + item.uuid)
					this.$refs.getcollection.close()
				} else {
					if (item.status == 5 || item.meta_chain != 1) {
						return
					}
					item.falg = !item.falg
				}
			},
			tapitem(item) {
				this.boxItem = item
				this.http('packages/sku_list', {
					product_id: item.product_id,
					page: 1,
					per_page: 999
				}).then(res => {
					this.$refs.getcollection.open()
					this.boxList = res.data.list
			
					if (this.userInfo.multiMany == 1) {
						this.boxList.forEach(item => {
							item.falg = false
						})
					}
			
				})
			}
		}
	}
</script>

<style>
.active {
		background: #000;
		color: #fff;
	}

	.dayuan {
		width: 28rpx;
		height: 28rpx;
		background: #FFFFFF;
		border-radius: 50%;
		border: 1px solid #000000;
	}

	.xiaoyuan {
		width: 15rpx;
		height: 15rpx;
		background: #000000;
		border-radius: 50%;
	}
</style>
